<script lang="ts" setup>
import { computed, onMounted, reactive, toRefs, type Ref } from 'vue';

import bg1 from '@/assets/images/home/start-bg1.png';
import bg2 from '@/assets/images/home/start-bg2.png';
import GlobalStore from '@/store/GlobalStore';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { signRewardApi } from '@/api/home.ts'

import SignRewardDialog from '@/components/SignRewardDialog.vue'

/** Global Store */
const globalStore = GlobalStore();
/** Config Store */
// const configStore = ConfigStore();

/** loading overlay visibility */
const loading: Ref<boolean> = computed({
  get: () => globalStore.loading,
  set: v => globalStore.setLoading(v),
});

const router = useRouter();
const { t } = useI18n();

onMounted(() => {
  loading.value = false;
});

const openUrl = (url: string) => {
  window.open(url);
};

const toIDO = () => {
  globalStore.setTab('IDO')
  router.push({ name: 'IDO' });
};

let state = reactive({
  visible: false,
  dialogData: null,
  disabled: false
})

let showDialog = (visible) => {
  state.visible = visible
}

let { visible, dialogData } = toRefs(state)

let handleSignReward = () => {
  if(state.disabled) return
  state.disabled = true
  signRewardApi()
  .then(({data}) => {
    state.dialogData = data
    showDialog(true)
    state.disabled = false

  })
  .catch(() => {
    state.disabled = false
  })
}

</script>

<template>
  <div
    class="bg-[#CDDFF7] absolute right-0 left-0 top-0 h-[148px] xs:hidden"
  ></div>
  <div class="border-b-[#BED4FF] border-b-[1px]">
    <div
      class="start-wrapper relative flex flex-column items-center overflow-hidden"
    >
      <div
        class="start-title"
        data-aos="fade-up"
        data-aos-easing="ease"
        data-aos-delay="300"
      >
        {{ t('message.home.start.title') }}
      </div>
      <div
        class="start-sub-title"
        data-aos="fade-up"
        data-aos-easing="ease"
        data-aos-delay="300"
      >
        {{ t('message.home.start.subtitle') }}
      </div>
      <div class="start-intro" data-aos="flip-up">
        {{ t('message.home.start.intro') }}
      </div>
      <div class="start-btn-group flex">
        <!-- <v-btn class="explore-btn" @click="openUrl('https://vote.sdao.win/#/')">
          {{ t('message.home.start.btn.explore') }}
        </v-btn>
        <v-btn class="ido-btn" @click.stop="toIDO">
          {{ t('message.home.start.btn.dao') }}
        </v-btn> -->
        <v-btn class="ido-btn" @click.stop="handleSignReward">
          领取今天奖励
        </v-btn>
      </div>

      <img :src="bg1" alt="" class="start-bg-1 absolute" />
      <img :src="bg2" alt="" class="start-bg-2 float-animation" />

      <div class="bubble x1"></div>
      <div class="bubble x2"></div>
      <div class="bubble x3"></div>
      <div class="bubble x4"></div>
      <div class="bubble x5"></div>
      <div class="bubble x6"></div>
      <div class="bubble x7"></div>
      <div class="bubble x8"></div>
      <div class="bubble x9"></div>
      <div class="bubble x10"></div>
      <div class="bubble x11"></div>
      <div class="bubble x12"></div>
      <div class="bubble x13"></div>
      <div class="bubble x14"></div>
    </div>
  </div>

<SignRewardDialog :visible='visible' @close='showDialog'/>
</template>


<style scoped lang="scss">
.start-wrapper {
  background: white;
  border-radius: 16px 16px 0px 0px;
  border-top: 1px solid #bed4ff;
  border-left: 1px solid #bed4ff;
  border-right: 1px solid #bed4ff;
  //margin-top: 120px;
  height: 850px;
  @apply xl:mx-[98px] lg:mx-[88px] xs:border-none xs:h-auto xs:mx-6;

  .start-title {
    margin-top: 118px;
    font-size: 98px;
    font-family: DINPro-Bold, DINPro;
    font-weight: bold;
    color: #161615;
    line-height: 1;
    @apply md:text-[78px] sm:text-[58px] xs:mt-[20px] xs:text-[32px];
  }
  .start-sub-title {
    margin-top: 10px;
    margin-bottom: 16px;
    width: 624px;
    font-size: 72px;
    font-family: DINPro-Light, DINPro;
    font-weight: 300;
    color: #161615;
    line-height: 72px;
    text-align: center;
    z-index: 99;
    @apply md:text-[48px] sm:text-[38px] md:w-[524px] sm:w-[424px] xs:mt-[6px] xs:mb-[12px] xs:text-[32px] xs:w-[280px] xs:leading-[40px] xs:text-center;
  }
  .start-intro {
    width: 730px;
    margin-bottom: 60px;
    font-size: 16px;
    font-family: DINPro-Regular, DINPro;
    font-weight: 400;
    color: #7a7893;
    line-height: 26px;
    z-index: 99;
    @apply text-center md:w-[630px] sm:w-[430px] xs:w-full xs:mb-8 xs:leading-[22px] xs:text-center;
  }
  .start-btn-group {
    @apply flex-row xs:flex-col z-50;
    .explore-btn,
    .ido-btn {
      height: 56px;
      background: #2b6eef;
      border-radius: 8px;
      font-size: 12px;
      font-family: DINPro-Bold, DINPro;
      font-weight: bold;
      color: #ffffff;
      box-shadow: none !important;
      @apply xl:w-40 lg:w-40 md:w-24 sm:w-20 xs:text-[14px] xs:w-32 xs:h-10;
    }
    .explore-btn {
      margin-right: 24px;
      @apply xs:mr-0 xs:mb-4;
    }
  }
}

.start-bg-1 {
  @apply bottom-0 left-[50px] sm:hidden xs:hidden;
}
.start-bg-2 {
  @apply absolute top-[204px] right-[50px] top-[234px] lg:right-[20px] sm:top-[204px] sm:right-[10px] xs:relative xs:right-[unset] xs:top-[unset] xs:w-[240px] xs:h-[246px] xs:mt-8 xs:mb-7 xs:z-50;
}

.x1 {
  animation: animateBubble 20s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  left: 17%;
  top: 13%;
  transform: scale(0.6);
}
.x2 {
  animation: animateBubble 20s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  left: 74%;
  top: 12%;
  transform: scale(0.4);
}
.x3 {
  animation: animateBubble 16s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  left: 60%;
  top: 24%;
  transform: scale(0.7);
}
.x4 {
  animation: animateBubble 20s linear infinite,
    sideWays 3s ease-in-out infinite alternate;
  left: 43%;
  top: 32%;
  transform: scale(0.5);
}
.x5 {
  animation: animateBubble 22s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  left: 22%;
  top: 37%;
  transform: scale(0.5);
}
.x6 {
  animation: animateBubble 14s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  left: 72%;
  top: 35%;
  transform: scale(0.8);
}
.x7 {
  animation: animateBubble 12s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  left: 1%;
  top: 46%;
  transform: scale(0.6);
}
.x8 {
  animation: animateBubble 16s linear infinite,
    sideWays 3s ease-in-out infinite alternate;
  left: 28%;
  top: 62%;
  transform: scale(0.4);
}
.x9 {
  animation: animateBubble 16s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  left: 69%;
  top: 56%;
  transform: scale(0.6);
}
.x10 {
  animation: animateBubble 24s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  left: 20%;
  top: 72%;

  transform: scale(0.8);
}
.x11 {
  animation: animateBubble 20s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  left: 36%;
  top: 73%;

  transform: scale(0.6);
}
.x12 {
  animation: animateBubble 24s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  left: 53%;
  top: 78%;

  transform: scale(0.4);
}
.x13 {
  animation: animateBubble 18s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  left: 74%;
  top: 76%;

  transform: scale(0.7);
}
.x14 {
  animation: animateBubble 16s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  left: 94%;
  top: 79%;

  transform: scale(0.8);
}
</style>
